<template>
  <el-card>
    <!-- 文字提示 -->
    <el-alert :title="`${total}条消息`"
              type="info"
              show-icon
              :closable="false" />
    <el-table :data="companyList">
      <el-table-column label="序号"
                       prop="id" />
      <el-table-column label="企业编号"
                       prop="number" />
      <el-table-column label="企业简称"
                       prop="shortName" />
      <el-table-column label="标签"
                       prop="tags" />
      <el-table-column label="创建者"
                       prop="creatorID" />
      <el-table-column label="创建日期"
                       prop="addDate" />
      <el-table-column label="备注"
                       prop="remarks" />
      <el-table-column label="状态">
        <template #default="{row}">
          <span v-if="row.state ===1">启用</span>
          <span v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="200px">
        <template>
          <el-button type="primary"
                     icon="el-icon-edit"
                     circle />
          <el-button type="success"
                     icon="el-icon-check"
                     circle />
          <el-button type="danger"
                     icon="el-icon-delete"
                     circle />
        </template>

      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination :current-page="query.page"
                     :page-sizes="[2, 3, 8, 10]"
                     :page-size="query.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </div>

  </el-card>
</template>

<script>
import { getCompanyListAPI } from '@/api/company-list'

import dayjs from 'dayjs'
export default {
  name: 'LogsView',
  data () {
    return {
      // 列表数据
      companyList: [],
      // 请求参数
      query: {
        page: 1,
        pagesize: 10
      },
      total: 0
    }
  },
  created () {
    this.getCompanyList()
  },
  methods: {
    // 获取公司列表
    async getCompanyList () {
      const res = await getCompanyListAPI(this.query)
      console.log(res)
      this.companyList = res.items
      this.companyList.forEach(item => {
        item.addDate = dayjs(item.addDate).format('YYYY-MM-DD')
      })
      this.total = res.counts
    },
    // 页面条数发生变化时
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getCompanyList()
    },
    // 页码发生变化时
    handleCurrentChange (val) {
      this.query.page = val
      this.getCompanyList()
    }
  }
}
</script>

<style scoped lang="scss">
.el-alert {
  margin-top: 20px;
}
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
</style>
